<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>休闲网注册页面</title>
    <link href="css/leisure.css" rel="stylesheet">
	<style type="text/css">
		span{
			color: #C81623;
		}
	</style>
</head>
<body>
    <div id="header" class="main">
        <div id="headerLeft">
            <img src="images/logo.gif" />
        </div>
        <div id="headerRight">注册 | 登录 | 帮助</div>
    </div>
    <div class="register">
        <form method="post" name="myform" id="myform">
                <h1 class="bold">注册休闲网</h1>
                <dl>
                    <dt>您的Email：</dt>
                    <dd><input id="email" type="text" class="inputs" /><span id="emailspan"></span></dd>
                </dl>
                <dl>
                    <dt>输入密码：</dt>
                    <dd><input id="pwd" type="password" class="inputs" /><span id="pwdspan"></span></dd>
                </dl>
                <dl>
                    <dt>再输入一遍密码：</dt>
                    <dd><input id="repwd" type="password" class="inputs" /></dd>
                </dl>
                <dl>
                    <dt>您的姓名：</dt>
                    <dd><input id="user" type="text" class="inputs" /></dd>
                </dl>
				<dl>
				    <dt>您的爱好：</dt>
				    <dd>
						<input type="checkbox" name="love" id="eat" value="eat" />吃
						<input type="checkbox" name="love" value="drink" />喝
						<input type="checkbox" name="love" value="sleep" />睡
					</dd>
				</dl>
                <dl>
                    <dt>性别：</dt>
                    <dd>
                        <input name="sex" type="radio" value="1" checked="checked" />男
                        <input name="sex" type="radio" value="0" />女</dd>
                </dl>
                <dl>
                    <dt class="left">出生日期：</dt>
                    <dd><select id="year" name="year">
                            <option value="1998">1998</option>
							<option value="1999">1999</option>
                        </select>年
                         <select name="month">
                             <option value="1">1</option>
                         </select>月
                       <select name="day">
                           <option value="12">12</option>
                       </select>日</dd>
                </dl>
                <dl>
                    <dt>&nbsp;</dt>
                    <dd><input name="btn" type="submit" value="注册" class="rb1" /></dd>
                </dl>
        </form>
    </div>
    <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
   <script src="js/jquery-1.12.4.js"></script>
    <script>
      $(document).ready(function(){
		  
		  // 进行邮箱的验证，通过返回true,不通过返回false
		  function checked_email(){
			  var emailval = $("#email").val();
			  var reg = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/;
			  if(reg.test(emailval)==false){
				$("#emailspan").html("邮箱地址不对");
				return false;
			  }else{
			  	$("#emailspan").html("");
				return true;
			  }
		  }
          $("#email").blur(function(){
			  checked_email();
		  });
		  
		  // 验证密码框 
		  function checked_pwd(){
			  var pwdVal = $("#pwd").val();
			  if(pwdVal==""){
				  $("#pwdspan").html("密码不能为空");
				  return false;
			  }
			  if(pwdVal.length<6){
				  $("#pwdspan").html("密码长度要大于6位");
				  return false;
			  }
			  $("#pwdspan").html("");
			  return true;
		  }
		  $("#pwd").blur(function(){
			  checked_pwd();
		  });
		  
		  
		  $("#myform").submit(function(){
			  var isEmail = checked_email();
			  var isPwd = checked_pwd();
			  var issubmit = isEmail&&isPwd;
			  return issubmit;
		  });
		  
		  
      })
    </script>
</body>
</html>
